<template>
  <div class="school">
      <h2>我是学校组件</h2>
      <hr/>
      <h4>学校名称:{{schoolName}}</h4>
      <h4>学校地址:{{schoolAddress}}</h4>
      <h4>学校年龄:{{schoolAge}}</h4>
      <hr/>
      <select name="n">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
      <button @click = 'addSchoolAge'>学校年龄增加</button>
  </div>
</template>

<script>
    export default {
        name: 'School',
        data() {
            return {
                n: 1,
            }
        },
        computed: {
            schoolName(){
                return this.$store.state.school.name
            },
            schoolAddress(){
                return this.$store.state.school.address
            },
            schoolAge(){
                return this.$store.state.school.age
            }
        },
        methods:{
            addSchoolAge(){
                this.$store.state.school.age += this.n
            }
        }
    }
</script>

<style scoped>
    .school{
        background-color: skyblue;
        padding: 10px;
    }
</style>